<template>
	<Layout :class="'bg-white p-2'">
		<Row class="m-2">
			<Col class="p-1" span="6">
			<Input class="w-100"v-model="phone" placeholder="请输入检索客户电话" />
			</Col>
			<Col class="p-1" span="6">
				<Input class="w-100" v-model="originalCode" placeholder="请输入检索微信订单编号" />
			</Col>
			<Col class="p-1" span="6">
			<Select class="w-100" clearable v-model="statu" placeholder="请选择订单状态">
				<Option value="ST">已开始</Option>
				<Option value="UNPAY">未支付</Option>
				<Option value="FIN">已结束</Option>
			</Select>
			</Col>
		</Row>
		<Row class="m-2">
			<Col class="p-1" span="6">
			<Select class="w-100" clearable v-model="type" placeholder="请选择订单支付类型">
				<Option value="P">支付</Option>
				<Option value="C">卡扣</Option>
				<Option value="V">券扣</Option>
			</Select>
			</Col>
			<Col class="p-1" span="6">
			<Date-picker class="w-100" type="datetime" @on-change="stChange" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择开始时间">
			</Date-picker>
			</Col>
			<Col class="p-1" span="6">
			<Date-picker class="w-100" type="datetime" @on-change="etChange" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择结束时间">
			</Date-picker>
			</Col>
			<Col class="p-1" span="6">
			<Button class="float-right" type="primary" shape="circle" @click="search" icon="ios-search">查询</Button>
			</Col>
		</Row>
		<Layout class="bg-white m-2">
			<Table border class="m-1" :columns="tableInfo.columnInfo" :data="tableInfo.data" @on-row-click="handleRowClick">
				<template slot-scope="{ row, index }" slot="amount">
					<span class="text-danger">￥{{util.parseMoney(row.amount / 100, 2)}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="statu">
					<span v-if="row.statu == 'ST'">已开始</span>
					<span v-if="row.statu == 'UNPAY'">未支付</span>
					<span v-if="row.statu == 'FIN'">已结束</span>
				</template>
				<template slot-scope="{ row, index }" slot="type">
					<span v-if="row.type == 'P'">支付</span>
					<span v-if="row.type == 'C'">卡扣</span>
					<span v-if="row.type == 'V'">券扣</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.orderId)">详细</Button>
				</template>
			</Table>
			<Page :class="'m-2 text-right'" :page-size="size" @on-change="searchPage" :total="total" />
		</Layout>
	</Layout>
</template>

<script>
	export default {
		data() {
			return {
				clientName: "",
				type: "",
				statu: "",
				st: "",
				et: "",
				storeId: "",
				originalCode:"",
				phone: "",
				current: 1,
				size: 10,
				total: 0,
				tableInfo: {
					columnInfo: [{
							
									title: "订单编号",
									key: "orderId",
									width: 110,
								},
								{
									title: "客户名称",
									key: "clientName",
									width: 100,
								},
								{
									title: "客户电话",
									key: "phone",
									width: 200,
								},
								{
									title: "开始时间",
									key: "st",
									width: 260,
								},
								{
									title: "结束时间",
									key: "et",
									width: 260,
								},
								{
									title: "订单状态",
									slot: "statu",
									width: 100,
									
								},
								{
									title: "支付类型",
									slot: "type",	
									width: 100,
								},
					
								{
									title: "支付平台支付编号",
									key: "originalCode",
									width:225,		
								},
								{
									title: "操作",
									slot: 'action',
								}
							],
					data: []
				},
				stores: []
			}
		},
		methods: {
			stChange(e) {
				this.st = e;
			},
			etChange(e) {
				this.et = e;
			},
			init() {
				this.search();
			},
			search() {
				this.current = 1;
				this.searchOrders()
			},
			searchOrders() {
				this.http.get({
					url: "/order/page",
					param: {
						clientName: this.clientName,
						type: this.type,
						statu: this.statu,
						st: this.st,
						et: this.et,
						storeId: this.storeId,
						phone: this.phone,
						current: this.current,
						size: this.size,
						originalCode:this.originalCode
					}
				}).then(response => {
					console.log(response)
					this.current = response.current;
					this.total = response.total;
					this.size = response.size;
					this.tableInfo.data = response.records;
				});
			},
			searchPage(page) {
				this.current = page;
				this.searchOrders();
			},
			show(orderId) {
				this.$router.push({
					name: "order_detail",
					params: {
						orderId
					}
				});
			},
			handleRowClick(row){
				this.$router.push({
					name: "order_detail",
					params: {
						orderId : row.orderId
					}
				});
			}
		},
		created() {
			this.storeId = this.store.state.currentUser.store.storeId;
			this.init();
		},

	}
</script>

<style>

</style>
